<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页</title>
<style type="text/css">

@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}
 
.shake-image {
    animation: shake 0.5s infinite;
}

body {
    margin: 0;
    padding: 0;
    height: 100vh; /* 使body高度等于视口高度 */
    background-image: url('../images/雪景.gif'); /* 替换为你的GIF路径 */
    background-size: cover; /* 使背景图像覆盖整个页面 */
    background-position: center; /* 使背景图像居中 */
    background-repeat: no-repeat; /* 防止背景图像重复 */
    color: white; /* 设置文本颜色（可选） */
    font-family: Arial, sans-serif; /* 设置字体（可选） */
    display: flex; /* 使用flexbox布局 */
    justify-content: center; /* 水平居中内容 */
    align-items: center; /* 垂直居中内容 */
    text-align: center; /* 文本居中 */
}
div,span{
    width: 400px;
    height: 50px;
    text-decoration-color: black;
    background-color: rgb(142, 226, 247);
    margin: 20px;
    text-align: center;
}
.d_one,.d_two,.d_three{display: inline;}
.s_one,.s_two,.s_three,.s_four{display: block;}
.confirm-link {
    position: relative;
    text-decoration: none;
    color: blue; 
}
.confirm-link:hover::after {
    content: attr(data-title);
    position: absolute;
    left: 0;
    top: 100%;
    white-space: nowrap;
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    margin-top: 5px;
    font-size: 12px;
    z-index: 1;
}
</style>
</head>
<body>
<table align="center">
    <tr align="center">
        <td align="center">
<div class="d_one">第一个div</div>
<div class="d_two">第二个div</div>
<div class="d_three">第三个div</div>
<span class="s_one">第一个span</span>
<span class="s_two">第二个span</span>
<span class="s_three">第三个span</span>
<span class="s_four">第四个span</span>
<a href="../JS/新页面1.html" class="confirm-link" data-title="点击进入新页面" data-message="确定进入新页面吗？">
    <img src="../images/疯狂的兔子.jpg" alt="Example Image" class="shake-image" width="200px" height="200px">
</a>
        </tr>
    </td>
</table>
<script type="text/javascript">
    alert('欢迎进入！！！');
    document.addEventListener('DOMContentLoaded', () => {
    const links = document.querySelectorAll('.confirm-link');
    links.forEach(link => {
        link.addEventListener('click', (event) => {
            event.preventDefault(); 
            const title = link.getAttribute('data-title');
            const message = link.getAttribute('data-message');
            const href = link.getAttribute('href');
            if (confirm(message)) {
                window.location.href = href;
            }
        });
    });
});

function shakeImage() {
            var img = document.querySelector('.shake-image');
            img.classList.add('active');
 
            // 在动画结束后移除active类，以便可以重新触发动画
            img.addEventListener('animationend', function() {
                img.classList.remove('active');
            }, { once: true });
        }

</script>
</body>
</head>
</html>